class Enlarge
{
    constructor(el,options={maskBg: "yellow"})
    {
        this.options = options 
        this.el = document.querySelector(el)
        this.imgObj = this.el.querySelector(".img")
        this.maskObj = this.el.querySelector(".mask")
        this.enlargeObj = this.el.querySelector(".enlarge")
        this.ulliObj = this.el.querySelectorAll("ul li")
      
        this.init()
    }
    
    init() {
    
        this.overOut()
        this.enlargeWH()
        this.maskMove()
        this.enlargeSetBg()
        this.smallImgChange()
        this.maskBj()
       
    }

  //修改遮罩框颜色
    maskBj() {
        this.maskObj.style.background = this.options.maskBg
    }

    //鼠标移入，显示遮罩框，放大镜
    //鼠标移出，隐藏遮罩框，放大镜
overOut() {
    this.imgObj.onmouseover = () =>{
       this.maskObj.style.display ="block"
       this.enlargeObj.style.display ="block"
    }
       this.imgObj.onmouseout = () =>{
        this.maskObj.style.display ="none"
        this.enlargeObj.style.display ="none"
      
   }
}

getfhnStyle(bqObj, sx)  //获取非行内样式  标签对象，css属性名
    {
        if (window.getComputedStyle)
        {
           //window.getComputedStyle(标签对象).css属性名
            return window.getComputedStyle(bqObj)[sx]  // 判断主流浏览器
        } else {
           //标签对象.currentStyle.css属性名
            return bqObj.currentStyle[sx]  // 判断非主流浏览器
        }
    }

//放大镜宽高
enlargeWH() {
    //放大镜宽高=遮罩框宽高*(背景大图/图片小图）

    let maskW = parseInt(this.getfhnStyle(this.maskObj, "width"))
    let maskH = parseInt(this.getfhnStyle(this.maskObj, "height"))
    // 留心：offsetWidth、offsetHeight不能获取隐藏元素

    let enlarge = this.getfhnStyle(this.enlargeObj, "background-size")
    //用split分割，获取background-size的宽度和高度，parseInt获取数字，去掉"px"
    let enlargeW = parseInt( enlarge.split(" ")[0]) 
    let enlargeH = parseInt( enlarge.split(" ")[1])

    let imgW = this.imgObj.clientWidth
    let imgH = this.imgObj.clientHeight

    this.enlargeObj.style.width = maskW * (enlargeW / imgW) + "px"
    this.enlargeObj.style.height = maskH * (enlargeH / imgH)  + "px"
    }

 
//鼠标移动
maskMove()  {
    this.imgObj.onmousemove = (evt) => { 
    
    let e = evt || window.event
    // 同步遮罩框的left和top，鼠标居中
    let maskLeft = e.pageX - this.imgObj.parentNode.offsetLeft - this.maskObj.offsetWidth/2
    let maskTop = e.pageY - this.imgObj.parentNode.offsetTop - this.maskObj.offsetHeight/2

    //边界限制
    if (maskLeft<0) maskLeft = 0
    if (maskTop<0) maskTop = 0

    let maxLeft = this.imgObj.offsetWidth - this.maskObj.offsetWidth
    let maxTop = this.imgObj.offsetHeight - this.maskObj.offsetHeight

    if (maskLeft>maxLeft) maskLeft = maxLeft
    if (maskTop>maxTop) maskTop = maxTop

    this.maskObj.style.left = maskLeft + "px"
    this.maskObj.style.top = maskTop + "px"
            
    this.enlargeSetBg(maskLeft, maskTop)       
     }
}

//同步放大镜效果
 enlargeSetBg(maskLeft, maskTop){
        
let enlargeW = parseFloat(this.getfhnStyle(this.enlargeObj, "width"))
let enlargeH = parseFloat(this.getfhnStyle(this.enlargeObj, "height"))
        
        
let maskW = parseInt(this.getfhnStyle(this.maskObj, "width"))
let maskH = parseInt(this.getfhnStyle(this.maskObj, "height"))

//放大镜放大图片left,top =（背景大图/图片小图）* 遮罩框left,top
let X = (enlargeW/maskW) * maskLeft
let Y = (enlargeH/maskH) * maskTop

this.enlargeObj.style.backgroundPosition = `-${X}px -${Y}px`
   }
    
   //小图切换 同步图片和放大镜背景图
   smallImgChange(){
       
       this.ulliObj.forEach((item,i)=>{
           item.onclick = ()=>{
            this.el.querySelector("ul li.active").className = ""
            this.ulliObj[i].className ="active"
            this.imgObj.style.background=`url(./imgs/${i+1}.jpg)`
            this.enlargeObj.style.background=`url(./imgs/${i+1}.big.jpg)`
           }
       })
   }

}